<template>
  <div style="height: 100%">
    <a-table size="mini" class="table-two-line" row-class="common-row" v-model:expanded-keys="expandedKeys" :data="tableData" row-key="id" :loading="loading" v-model:selected-keys="ids" :row-selection="rowSelection" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
      <template #columns>
        <a-table-column title="序号" :width="40" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="店铺" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="订单号/平台订单号" :width="120" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="销售出库单" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="订单金额" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="收件人" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="国家" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="省州(邮编)" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="物流等级" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="发货仓" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="物流渠道" :width="80" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="承运商/跟踪号" :width="100" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="下单时间（+8）" :width="140" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>

        <a-table-column title="承诺发货时间" :width="140" #cell="{ record, rowIndex }">
          {{ record.id }}
        </a-table-column>
        <a-table-column title="操作" :width="80" #cell="{ record, rowIndex }">
          <a-button type="text">详情</a-button>

          <a-dropdown @select="btnSelect($event, record)">
            <icon-more style="font-size: 14px; margin-left: 5px; color: rgb(var(--primary-6))" />
            <template #content>
              <a-doption value="cancel">取消订单</a-doption>
              <a-doption value="log">日志</a-doption>
            </template>
          </a-dropdown>
        </a-table-column>
      </template>
      <template #expand-row="{ record }">
        <div class="item-box" :style="{ maxHeight: !record.isCollapse ? '160px' : `100%`, overflow: !record.isCollapse ? 'hidden' : 'auto' }">
          <div style="width: 80px; height: 80px" class="fl" v-if="record.items.length > 2">
            <div class="footer" @click="collapse(record)">{{ record.isCollapse ? '收起' : '展开' }}</div>
          </div>
          <div class="item-detail-box" v-for="item of record.items">
            <div class="img fl">
              <ImgPopover src="https://cdn2.selleroa.com/saas/product/77330411873140737.png">
                <template #con>
                  <div @click="showProductModal(item)" style="width: 60px; height: 60px; margin: 10px; position: relative; overflow: hidden">
                    <div class="flag">定制</div>
                    <a-image :preview="false" width="60" height="60" fit="contain" src="https://cdn2.selleroa.com/saas/product/77330411873140737.png" />
                  </div>
                </template>
              </ImgPopover>
            </div>
            <div class="sku-info fl">
              <TextLimit position="top" :rows="1">B09MCVQNHS</TextLimit>
              <TextLimit position="top" class="highlight" :rows="1">B09B09MCVQNHSB09MCVQNHSB09MCVQNHSMCVQNHS</TextLimit>
              <TextLimit position="top" class="highlight" :rows="1">B09MCB09MCVQNHSB09MCVQNHSB09MCVQNHSVQNHS</TextLimit>
            </div>
            <div class="saleman-info fl" style="margin-top: 10px">
              <p style="display: flex">
                <span class="text-label">SKU：</span>
                <TextLimit position="top" style="width: 120px" class="highlight" :rows="1">B09MB09MCVQNHSB09MCVQNHSCVQNHS</TextLimit>
                <span @click="matchSkuForUser(item)" style="font-size: 12px; color: rgb(var(--primary-6)); cursor: pointer" class="icon icon-bianji1"></span>
              </p>
              <p style="display: flex"><span class="text-label">销售：</span><TextLimit position="top" style="width: 120px" class="highlight" :rows="1">B09MCVQNHS</TextLimit> </p>
            </div>
            <div class="num fl">
              <p><span class="text-label">订购数量：</span><span class="highlight">1</span></p>
              <p><span class="text-label">发货数量：</span><span class="highlight">1</span></p>
              <p><span class="text-label">可用库存：</span><span class="highlight">1</span></p>
            </div>
            <div class="price fl">
              <p> <span class="text-label">售价：</span> <span class="highlight">1</span></p>
              <p><span class="text-label">优惠：</span><span class="highlight">1</span></p>
            </div>
            <div class="ingredients fl">
              <p style="display: flex">
                <span class="text-label">申购：</span>
                <span class="highlight">
                  <TextLimit position="top" style="width: 80px" class="highlight" :rows="1">B09MB09MCVQNHSB09MCVQNHSCVQNHS</TextLimit>
                </span>
                <a-popover>
                  <span style="font-size: 12px; color: rgb(var(--primary-6)); cursor: pointer" class="icon icon-caigou"></span>
                  <template #content>
                    <p>点击创建申购单。定制单不可以创建申购单</p>
                  </template>
                </a-popover>
              </p>
              <p style="display: flex">
                <span class="text-label">包装：</span>
                <span class="highlight" style="display: flex">
                  <TextLimit position="top" style="width: 80px" class="highlight" :rows="1">B09MB09MCVQNHSB09MCVQNHSCVQNHS</TextLimit>
                </span>
                <span @click="setPack(item)" style="font-size: 12px; color: rgb(var(--primary-6)); cursor: pointer" class="icon icon-bianji1"></span>
              </p>
            </div>
            <div class="remark fl">
              <TextLimit class="highlight" position="top" :rows="2">SB09MCVQNHSB09MCVQNHSB09MCVQNHSB09MCVQNHSB09MCVQNHSVQNHS</TextLimit>
            </div>
            <div class="status fl"> 待发货 </div>
          </div>
        </div>
      </template>
    </a-table>
  </div>

  <ProductDetail ref="procudtDetail" :info="itemsInfo" />
  <MatchProductSku ref="matchSku" :info="itemsInfo" />
  <Pack ref="pack" :info="itemsInfo" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import TextLimit from '@/components/textLimit.vue'
  import ProductDetail from './showProductDetail.vue'
  import MatchProductSku from './matchProductSku.vue'
  import Pack from './pack.vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['dataList', 'modelValue'],
    components: { TextLimit, ProductDetail, MatchProductSku, Pack },
    setup(props: any, { emit }) {
      const procudtDetail = ref()
      const matchSku = ref()
      const pack = ref()

      const data: any = reactive({
        loading: false,
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        expandedKeys: ['1', '2', '3', '4'],
        // tableData: _.cloneDeep(props.dataList),
        tableData: [],
        itemsInfo: {},
      })
      const collapse = (item: any) => {
        item.isCollapse = !item.isCollapse
      }

      const btnSelect = (type: string, item: any) => {
        console.log(type, item)
      }

      const showProductModal = (item: any) => {
        data.itemsInfo = item
        procudtDetail.value.visible = true
      }
      const matchSkuForUser = (item: any) => {
        data.itemsInfo = item
        matchSku.value.visible = true
      }
      const setPack = (item: any) => {
        data.itemsInfo = item
        pack.value.visible = true
      }

      let ids = computed({
        set(val) {
          emit('update:modelValue', val)
        },
        get() {
          return props.modelValue
        },
      })

      return {
        ...(toRefs(data) as any),
        ids,
        collapse,
        btnSelect,
        procudtDetail,
        showProductModal,
        matchSku,
        matchSkuForUser,
        pack,
        setPack,
      }
    },
  })
</script>

<style lang="less" scoped>
  .common-row {
    // background-color: white;
  }

  .footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    color: hotpink;
    background-color: white;
    cursor: pointer;
  }

  .item-box {
    // transition: all 0.4s ease-in-out;
    background-color: white;
    :deep(.arco-typography) {
      margin-bottom: 0 !important;
    }
    .item-detail-box {
      margin-left: 80px;
      height: 80px;
      background-color: white;
      overflow: hidden;

      p {
        margin-bottom: 5px;
      }

      // div {
      //   float: left;
      //   height: 80px;
      .img {
        width: 80px;
        text-align: center;
      }
      .sku-info {
        width: 140px;
        margin-top: 10px;
      }
      .saleman-info {
        width: 180px;
      }
      .num {
        width: 120px;
        margin-top: 10px;
      }
      .price {
        width: 120px;
        margin-top: 10px;
      }
      .ingredients {
        width: 180px;
        margin-top: 10px;
      }
      .remark {
        width: 180px;
        margin-top: 10px;
      }
      .status {
        line-height: 80px;
        margin-left: 60px;
        // width: 180px;
      }
    }
    // }
  }

  .collapse {
    // min-height: 160px;
    overflow: hidden;
  }

  .no-collapse {
    // height: 100%;
  }

  .flag {
    width: 60px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 2px;
    left: 20px;
    background-color: red;
    color: white;
    transform: rotate(45deg);
    z-index: 10;
    font-size: 12px;
  }

  .text-label {
    color: #666;
  }
</style>
